<template>
  <view class="container">
    <view class="flex flex-justify-between padding-y-15 padding-x-5">
      <simple-image :src="topIcon" width="432rpx" height="104rpx" class="margin-top-10"></simple-image>
      <view>
        <simple-image src="/static/images/work/icon-top.png" width="300rpx" height="200rpx"></simple-image>
      </view>
    </view>

    <view class="color-bg-fff border-radius-10 margin-10 shadow" style="overflow: hidden;">
      <view class="flex-between padding-10" style="background-color: #FCECDE;">
        <view class="flex-start">
          <view class="color-bg-fff padding-5 border-radius-10 flex-center">
            <simple-image src="/static/images/work/icon-pople.png" width="70rpx" height="70rpx"></simple-image>
          </view>
          <view class="margin-left-10">
            <view class="color-darkerYellow font-weight font-16">{{ currentBank.bankName || '请选择题库' }}</view>
            <view class="color-darkerYellow margin-top-5 font-12">{{ currentBank.description || '当前题库' }}</view>
          </view>
        </view>
        <view class="color-bg-fff color-darkerYellow padding-x-15 padding-y-5 flex-center" style="border-radius: 30rpx;" @click="showBankSelector">
          切换
          <u-icon name="arrow-right" color="#DD6703" size="14"></u-icon>
        </view>
      </view>
      <view class="padding-15">
        <u-grid :border="false" col="4" class="margin-top-10 margin-bottom-15">
        <u-grid-item>
          <view class="color-333 font-22 font-weight">{{ studiedQuestions }}</view>
          <text class="color-666 font-12 margin-top-5 margin-bottom-10">已学题目</text>
        </u-grid-item>
        <u-grid-item>
          <view class="color-333 font-22 font-weight">{{ studyDays }}</view>
          <text class="color-666 font-12 margin-top-5 margin-bottom-10">学习天数</text>
        </u-grid-item>
        <u-grid-item>
          <view class="color-333 font-22 font-weight">{{ correctRate }}%</view>
          <text class="color-666 font-12 margin-top-5 margin-bottom-10">正确率</text>
        </u-grid-item>
        <u-grid-item>
          <view class="color-333 font-22 font-weight">{{ currentBank.questionCount || 0 }}</view>
          <text class="color-666 font-12 margin-top-5 margin-bottom-10">题库总数</text>
        </u-grid-item>
      </u-grid>
      <view class="padding-10 border-radius-10" style="background-color: #f1f5ff;">
        <view class="flex-between margin-bottom-10">
          <view class="color-main font-weight">每日打卡</view>
          <view class="color-666 font-12" v-if="weeklyCheckIn.checkInDays">
            本周已打卡 {{ weeklyCheckIn.checkInDays }} 天
          </view>
        </view>
        <view class="padding-10 flex-between">
          <view class="flex-center flex-col checkin-day" v-for="(day, index) in weekDays" :key="index" @click="showDayDetail(day)">
            <view class="color-333 font-weight font-12" >
              {{ day.week }}
            </view>
            <view class="margin-top-10 date flex-center" :class="[day.checked ? 'checked-date color-333 font-light' : 'color-999']">
              {{ day.date }}
            </view>
            <view class="margin-top-5 font-10" :class="[day.checked ? 'color-main' : 'color-ccc']" v-if="day.questionCount > 0">
              {{ day.questionCount }}题
            </view>
          </view>
        </view>
        <view class="margin-top-10 color-666 font-12 text-center" v-if="weeklyCheckIn.continuousDays">
          连续打卡 {{ weeklyCheckIn.continuousDays }} 天
        </view>
      </view>
      </view>
      
    </view>
    <view class="flex-between margin-x-10 margin-top-20 flex-wrap">
      <view v-for="(item, index) in functionItems" :key="index" @click="goPage(item.url, item)" class="color-bg-fff border-radius-10 padding-y-15 padding-x-10 shadow flex-between margin-bottom-15" style="width: 48.5%;">
        <view>
          <view class="font-16 color-main font-weight">{{ item.title }}</view>
          <view class="color-999 font-12 margin-top-5">{{ item.desc }}</view>
        </view>
        <simple-image :src="item.icon" width="120rpx" height="120rpx"></simple-image>
      </view>
    </view>
    <!-- 主要功能区域 -->
    <!-- <view class="main-content"> -->
      <!-- 功能模块网格 -->
      <!-- <view class="function-grid">
        <view class="function-item" @click="navigateTo('sequential')">
          <view class="function-icon sequential-icon">
            <text class="icon-text">📚</text>
          </view>
          <text class="function-title">顺序练习</text>
          <text class="function-desc">按章节顺序刷题</text>
        </view>

        <view class="function-item" @click="navigateTo('exam')">
          <view class="function-icon exam-icon">
            <text class="icon-text">📝</text>
          </view>
          <text class="function-title">模拟考试</text>
          <text class="function-desc">真实考试环境</text>
        </view>

        <view class="function-item" @click="navigateTo('random')">
          <view class="function-icon random-icon">
            <text class="icon-text">🎲</text>
          </view>
          <text class="function-title">随机练习</text>
          <text class="function-desc">随机抽取题目</text>
        </view>

        <view class="function-item" @click="navigateTo('errors')">
          <view class="function-icon error-icon">
            <text class="icon-text">❌</text>
          </view>
          <text class="function-title">我的错题</text>
          <text class="function-desc">{{ errorCount || 0 }} 道错题</text>
        </view>

        <view class="function-item" @click="navigateTo('favorites')">
          <view class="function-icon favorite-icon">
            <text class="icon-text">⭐</text>
          </view>
          <text class="function-title">我的收藏</text>
          <text class="function-desc">{{ favoriteCount }} 道收藏</text>
        </view> -->

        <!-- <view class="function-item" @click="navigateTo('analysis')">
          <view class="function-icon analysis-icon">
            <text class="icon-text">📊</text>
          </view>
          <text class="function-title">学习分析</text>
          <text class="function-desc">查看学习报告</text>
        </view> -->
      <!-- </view> -->

      <!-- 最近学习记录 -->
      <!-- <view class="recent-study">
        <view class="section-header">
          <text class="section-title">最近学习</text>
          <text class="more-btn" @click="viewMore">查看更多</text>
        </view>
        <view class="study-list">
          <view class="study-item" v-for="(item, index) in recentStudy" :key="index">
            <view class="study-info">
              <text class="study-subject">{{ item.subject }}</text>
              <text class="study-time">{{ item.time }}</text>
            </view>
            <view class="study-stats">
              <text class="study-score">{{ item.score }}分</text>
              <text class="study-count">{{ item.count }}题</text>
            </view>
          </view>
        </view>
      </view> -->
    <!-- </view> -->
    
    <!-- 题库选择弹窗 -->
    <u-popup :show="showBankPopup" @close="showBankPopup = false" mode="bottom" :round="20" :closeable="true" :close-on-click-overlay="true" :z-index="10090" :safe-area-inset-bottom="true" :overlay="true" :overlay-opacity="0.5">
      <view class="bank-selector">
        <view class="popup-header">
          <text class="popup-title">选择题库</text>
        </view>
        <view class="bank-list">
          <view 
            class="bank-item" 
            v-for="(bank) in questionBankList" 
            :key="bank.bankId"
            @click="selectBank(bank)"
            :class="{ 'active': currentBank.bankId === bank.bankId }"
          >
            <view class="bank-info">
              <view class="bank-name">{{ bank.bankName }}</view>
              <view class="bank-desc">{{ bank.description }}</view>
              <view class="bank-count">共 {{ bank.questionCount }} 题</view>
            </view>
            <view class="bank-status" v-if="currentBank.bankId === bank.bankId">
              <u-icon name="checkmark" color="#007AFF" size="20"></u-icon>
            </view>
          </view>
        </view>
      </view>
    </u-popup>

    <!-- 题型选择弹窗 -->
    <u-popup :show="showTypePopup" @close="showTypePopup = false" mode="bottom" :round="20" :closeable="true" :close-on-click-overlay="true" :z-index="10090" :safe-area-inset-bottom="true" :overlay="true" :overlay-opacity="0.5">
      <view class="type-selector">
        <view class="popup-header">
          <text class="popup-title">选择题型</text>
        </view>
        <view class="type-list">
          <view 
            class="type-item" 
            v-for="type in questionTypes" 
            :key="type.value"
            @click="selectQuestionType(type)"
          >
            <view class="type-icon">
              <text class="icon-text">{{ type.icon }}</text>
            </view>
            <view class="type-info">
              <view class="type-name">{{ type.name }}</view>
              <view class="type-desc">{{ type.desc }}</view>
            </view>
            <view class="type-arrow">
              <u-icon name="arrow-right" color="#999" size="16"></u-icon>
            </view>
          </view>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import { listQuestionFavorite } from '@/api/exam/questionFavorite.js'
import { myQuestionBankList, getBankProgressInfo, getWeeklyCheckIn } from '@/api/exam/questionBank.js'
import dayjs from 'dayjs';

export default {
  data() {
    return {
      studyDays: 15,
      totalQuestions: 1250,
      correctRate: 85,
      todayProgress: 12,
      dailyTarget: 20,
      errorCount: 23,
      favoriteCount: 45,
      // 本周打卡数据
      weekDays: [],
      weeklyCheckIn: {}, // 本周打卡情况
      recentStudy: [
        {
          subject: '数据结构与算法',
          time: '今天 14:30',
          score: 92,
          count: 15
        },
        {
          subject: '计算机网络',
          time: '昨天 20:15',
          score: 88,
          count: 20
        },
        {
          subject: '操作系统',
          time: '昨天 16:45',
          score: 95,
          count: 10
        }
      ],
      functionItems: [
        {
          title: '章节练习',
          desc: '章节划分方便练习',
          icon: '/static/images/work/icon1.png',
          url: '/pages/chapterPractice/index',
          needBankId: true // 标记需要传入 bankId
        },
        {
          title: '题型练习',
          desc: '题型分类针对练习',
          icon: '/static/images/work/icon2.png',
          url: '/pages/questionTypePractice/typeSelect',
          needBankId: true // 标记需要传入 bankId
        },
        {
          title: '我的收藏',
          desc: '收藏题目随时复习',
          icon: '/static/images/work/icon3.png',
          url: '/pages/favorites/index',
          needBankId: true // 标记需要传入 bankId
        },
        {
          title: '我的错题',
          desc: '错题收集重点攻克',
          icon: '/static/images/work/icon4.png',
          url: '/pages/myfaul/index',
          needBankId: true // 标记需要传入 bankId
        }
      ],
      questionBankList: [], // 用户题库列表
      currentBank: {}, // 当前选中的题库
      studiedQuestions: 0, // 已学题目数
      showBankPopup: false, // 显示题库选择弹窗
      showTypePopup: false, // 显示题型选择弹窗
      progressInfo: {}, // 题库进度信息
      // 题型列表
      questionTypes: [
        {
          value: 1,
          name: '单选题',
          desc: '每题只有一个正确答案',
          icon: '📝'
        },
        {
          value: 2,
          name: '多选题',
          desc: '每题有多个正确答案',
          icon: '📋'
        },
        {
          value: 3,
          name: '判断题',
          desc: '判断对错',
          icon: '✅'
        }
      ]
    }
  },
  computed: {
    topIcon(){
      const hour = new Date().getHours();
      if (hour >= 6 && hour < 12) {
        return '/static/images/work/icon-morning.png';
      } else if (hour >= 12 && hour < 18) {
        return '/static/images/work/icon-arvo.png';
      } else {
        return '/static/images/work/icon-night.png';
      }
    },
    progressPercent() {
      return Math.min((this.todayProgress / this.dailyTarget) * 100, 100)
    }
  },
  onLoad() {
    // 页面加载时获取用户数据
    // this.loadUserData()
    // this.getFavoriteCount()
    // 初始化页面数据
    this.initPageData()
  },
  onShow() {
    // 页面显示时刷新数据（包括从其他页面返回时）
    this.refreshPageData()
  },
  methods: {
    // 初始化页面数据（首次加载时调用）
    initPageData() {
      // 获取用户题库列表
      this.getMyQuestionBankList()
      // 获取本周打卡情况
      this.getWeeklyCheckInData()
    },
    // 刷新页面数据（页面显示时调用，包括从其他页面返回）
    refreshPageData() {
      // 刷新本周打卡情况（实时更新）
      this.getWeeklyCheckInData()
      
      // 如果已有选中的题库，刷新该题库的进度信息
      if (this.currentBank.bankId) {
        // 刷新题库进度信息（包括已学题目、正确率、学习天数等）
        this.loadBankProgress()
      }
    },
    // 获取本周打卡情况
    getWeeklyCheckInData() {
      getWeeklyCheckIn().then(res => {
        if (res.code === 200) {
          this.weeklyCheckIn = res.data || {}
          this.initWeekDaysFromAPI()
        }
      }).catch(err => {
        console.error('获取打卡情况失败:', err)
        // 失败时使用默认方法
        this.initWeekDays()
      })
    },

    // 根据API数据初始化本周打卡显示
    initWeekDaysFromAPI() {
      if (!this.weeklyCheckIn.dailyCheckIns) {
        this.initWeekDays()
        return
      }
      
      this.weekDays = this.weeklyCheckIn.dailyCheckIns.map(day => {
        const dayNames = {
          1: "一", 2: "二", 3: "三", 4: "四", 
          5: "五", 6: "六", 7: "日"
        }
        
        return {
          week: dayNames[day.dayOfWeek] || day.dayOfWeekText.replace('周', ''),
          date: dayjs(day.date).format("DD"),
          checked: day.isCheckedIn,
          questionCount: day.questionCount || 0,
          fullDate: day.date
        }
      })
    },

    // 备用的初始化方法（当API失败时使用）
    initWeekDays() {
      const today = dayjs();
      const weekDay = today.day(); // dayjs里：周日=0，周一=1...周六=6
    
      // 计算本周一
      const startOfWeek = today.subtract((weekDay + 6) % 7, "day"); 
    
      const weekNames = ["一", "二", "三", "四", "五", "六", "日"];
    
      this.weekDays = Array.from({ length: 7 }, (_, i) => {
        const current = startOfWeek.add(i, "day");
        return {
          week: weekNames[i],
          date: current.format("DD"),
          checked: current.isSame(today, "day"),
          questionCount: 0,
          fullDate: current.format("YYYY-MM-DD")
        };
      });
    },

    // 显示每日打卡详情
    showDayDetail(day) {
      if (!day.checked && day.questionCount === 0) {
        uni.showToast({
          title: '该日未打卡',
          icon: 'none',
          duration: 1500
        })
        return
      }
      
      const title = `${day.fullDate} (周${day.week})`
      const content = day.checked 
        ? `已完成 ${day.questionCount} 道题目` 
        : '未打卡'
        
      uni.showModal({
        title: title,
        content: content,
        showCancel: false,
        confirmText: '知道了'
      })
    },

    goPage(url, item){
      // 特殊处理题型练习，显示题型选择弹框
      if (item && item.url === '/pages/questionTypePractice/typeSelect') {
        this.showTypeSelector()
        return
      }
      
      // 检查是否需要传入 bankId
      if (item && item.needBankId) {
        // 检查是否有选中的题库
        if (!this.currentBank.bankId) {
          uni.showToast({
            title: '请先选择题库',
            icon: 'none',
            duration: 2000
          })
          return
        }
        // 拼接 bankId 参数
        const separator = url.includes('?') ? '&' : '?'
        url = `${url}${separator}bankId=${this.currentBank.bankId}`
      }
      
      uni.navigateTo({
        url
      })
    },
    navigateTo(type) {
      // 这里添加页面跳转逻辑
      switch(type) {
        case 'sequential':
          uni.navigateTo({
            url: '/pages/practice/sequential'
          })
          break
        case 'exam':
          uni.showToast({
            title: '正在建设中',
            icon: 'none',
            duration: 2000
          })
          break
        case 'random':
          uni.navigateTo({
            url: '/pages/random/bankList'
          })
          break
        case 'errors':
          uni.navigateTo({
            url: '/pages/errors/index'
          })
          break
        case 'favorites':
          uni.navigateTo({
            url: '/pages/favorites/index'
          })
          break
        case 'analysis':
          uni.navigateTo({
            url: '/pages/analysis/index'
          })
          break
      }
    },
    viewMore() {
      uni.navigateTo({
        url: '/pages/study/history'
      })
    },
    loadUserData() {
      // 这里添加获取用户数据的逻辑
    },
    getFavoriteCount() {
      listQuestionFavorite({pageNum: 1, pageSize: 1}).then(res => {
        this.favoriteCount = res.total
      })
    },
    // 获取用户题库列表
    getMyQuestionBankList() {
      myQuestionBankList().then(res => {
        if (res.code === 200) {
          this.questionBankList = res.data || []
          
          // 如果有题库数据，默认选择第一个
          if (this.questionBankList.length > 0) {
            this.currentBank = this.questionBankList[0]
            // 可以在这里获取该题库的学习进度数据
            this.loadBankProgress()
          }
        }
      }).catch(err => {
        console.error('获取题库列表失败:', err)
        uni.showToast({
          title: '获取题库列表失败',
          icon: 'none',
          duration: 2000
        })
      })
    },
    
    // 显示题库选择器
    showBankSelector() {
      if (this.questionBankList.length === 0) {
        uni.showToast({
          title: '暂无可用题库',
          icon: 'none'
        })
        return
      }
      
      this.showBankPopup = true
    },
    
    // 选择题库
    selectBank(bank) {
      this.currentBank = bank
      this.showBankPopup = false
      // 切换题库后重新加载进度数据
      this.loadBankProgress()
      
      uni.showToast({
        title: `已切换到：${bank.bankName}`,
        icon: 'success',
        duration: 1500
      })
    },
    
    // 加载题库学习进度
    loadBankProgress() {
      if (!this.currentBank.bankId) {
        return
      }
      
      getBankProgressInfo(this.currentBank.bankId).then(res => {
        if (res.code === 200) {
          this.progressInfo = res.data || {}
          
          // 根据返回的进度信息更新页面数据
          this.studiedQuestions = this.progressInfo.studiedCount || 0
          this.correctRate = this.progressInfo.accuracyRate || 0
          this.studyDays = this.progressInfo.studyDays || 0
          this.errorCount = this.progressInfo.errorCount || 0
        }
      }).catch(err => {
        console.error('获取题库进度失败:', err)
        // 失败时使用默认值
        this.studiedQuestions = 0
        this.correctRate = 0
        this.errorCount = 0
      })
    },
    
    // 显示题型选择器
    showTypeSelector() {
      // 检查是否有选中的题库
      if (!this.currentBank.bankId) {
        uni.showToast({
          title: '请先选择题库',
          icon: 'none',
          duration: 2000
        })
        return
      }
      
      this.showTypePopup = true
    },
    
    // 选择题型
    selectQuestionType(type) {
      this.showTypePopup = false
      
      // 再次验证题库ID是否存在
      if (!this.currentBank.bankId) {
        uni.showToast({
          title: '请先选择题库',
          icon: 'none',
          duration: 2000
        })
        return
      }
      
      // 跳转到题型练习页面，传递 bankId 和 questionType 参数
      const url = `/pages/questionTypePractice/index?bankId=${this.currentBank.bankId}&questionType=${type.value}`
      
      uni.navigateTo({
        url
      })
    }
  }
}
</script>

<style scoped>
page {
  background: linear-gradient(180deg, #f7f7fc 0%, #f2f6ff 100%);
}

/* .study-days {
  font-size: 24rpx;
  color: rgba(255, 255, 255, 0.8);
}

.stats {
  display: flex;
  gap: 30rpx;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.stat-number {
  font-size: 28rpx;
  color: #fff;
  font-weight: bold;
  margin-bottom: 4rpx;
}

.stat-label {
  font-size: 22rpx;
  color: rgba(255, 255, 255, 0.8);
}

.main-content {
  background: #f8f9fa;
  border-radius: 30rpx 30rpx 0 0;
  margin-top: 20rpx;
  padding: 30rpx;
  min-height: calc(100vh - 200rpx);
}

.progress-card {
  background: #fff;
  border-radius: 20rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
}

.progress-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

.progress-title {
  font-size: 28rpx;
  color: #333;
  font-weight: bold;
}

.progress-text {
  font-size: 24rpx;
  color: #666;
}

.progress-bar {
  height: 12rpx;
  background: #f0f0f0;
  border-radius: 6rpx;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #667eea, #764ba2);
  border-radius: 6rpx;
  transition: width 0.3s ease;
}

.function-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20rpx;
  margin-bottom: 40rpx;
}

.function-item {
  background: #fff;
  border-radius: 20rpx;
  padding: 30rpx 20rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease;
}

.function-item:active {
  transform: scale(0.95);
}

.function-icon {
  width: 80rpx;
  height: 80rpx;
  border-radius: 20rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 15rpx;
}

.sequential-icon {
  background: linear-gradient(135deg, #667eea, #764ba2);
}

.exam-icon {
  background: linear-gradient(135deg, #f093fb, #f5576c);
}

.random-icon {
  background: linear-gradient(135deg, #4facfe, #00f2fe);
}

.error-icon {
  background: linear-gradient(135deg, #fa709a, #fee140);
}

.favorite-icon {
  background: linear-gradient(135deg, #a8edea, #fed6e3);
}

.analysis-icon {
  background: linear-gradient(135deg, #ffecd2, #fcb69f);
}

.icon-text {
  font-size: 36rpx;
}

.function-title {
  font-size: 26rpx;
  color: #333;
  font-weight: bold;
  margin-bottom: 8rpx;
}

.function-desc {
  font-size: 22rpx;
  color: #666;
  text-align: center;
}

.recent-study {
  background: #fff;
  border-radius: 20rpx;
  padding: 30rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

.section-title {
  font-size: 28rpx;
  color: #333;
  font-weight: bold;
}

.more-btn {
  font-size: 24rpx;
  color: #667eea;
}

.study-list {
  display: flex;
  flex-direction: column;
  gap: 15rpx;
}

.study-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 0;
  border-bottom: 1rpx solid #f0f0f0;
}

.study-item:last-child {
  border-bottom: none;
}

.study-info {
  display: flex;
  flex-direction: column;
}

.study-subject {
  font-size: 26rpx;
  color: #333;
  margin-bottom: 8rpx;
}

.study-time {
  font-size: 22rpx;
  color: #999;
}

.study-stats {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.study-score {
  font-size: 26rpx;
  color: #667eea;
  font-weight: bold;
  margin-bottom: 4rpx;
}

.study-count {
  font-size: 22rpx;
  color: #999;
} */

.date{
  width: 60rpx;
  height: 60rpx;
}
.checked-date {
  background-color: #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 题库选择弹窗样式 */
.bank-selector {
  padding: 30rpx;
  max-height: 80vh;
  background-color: #ffffff;
  position: relative;
  z-index: 10000;
}

.popup-header {
  text-align: center;
  padding-bottom: 30rpx;
  border-bottom: 1rpx solid #f0f0f0;
  margin-bottom: 30rpx;
}

.popup-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.bank-list {
  max-height: 60vh;
  overflow-y: auto;
}

.bank-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx 20rpx;
  margin-bottom: 20rpx;
  background: #f8f9fa;
  border-radius: 15rpx;
  transition: all 0.3s ease;
}

.bank-item.active {
  background: #e3f2fd;
  border: 2rpx solid #007AFF;
}

.bank-item:active {
  transform: scale(0.98);
}

.bank-info {
  flex: 1;
}

.bank-name {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 8rpx;
}

.bank-desc {
  font-size: 24rpx;
  color: #666;
  margin-bottom: 8rpx;
  line-height: 1.4;
}

.bank-count {
  font-size: 22rpx;
  color: #007AFF;
  font-weight: 500;
}

.bank-status {
  margin-left: 20rpx;
}

/* 每日打卡样式优化 */
.checkin-day {
  transition: transform 0.2s ease;
  padding: 10rpx;
  border-radius: 10rpx;
}

.checkin-day:active {
  transform: scale(0.95);
  background-color: rgba(0, 122, 255, 0.1);
}

/* 题型选择弹窗样式 */
.type-selector {
  padding: 30rpx;
  max-height: 80vh;
  background-color: #ffffff;
  position: relative;
  z-index: 10000;
}

.type-list {
  max-height: 60vh;
  overflow-y: auto;
}

.type-item {
  display: flex;
  align-items: center;
  padding: 30rpx 20rpx;
  margin-bottom: 20rpx;
  background: #f8f9fa;
  border-radius: 15rpx;
  transition: all 0.3s ease;
}

.type-item:active {
  transform: scale(0.98);
  background: #e3f2fd;
}

.type-icon {
  width: 80rpx;
  height: 80rpx;
  background: #8CBBF8;
  border-radius: 20rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20rpx;
}

.icon-text {
  font-size: 36rpx;
}

.type-info {
  flex: 1;
}

.type-name {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 8rpx;
}

.type-desc {
  font-size: 24rpx;
  color: #666;
  line-height: 1.4;
}

.type-arrow {
  margin-left: 20rpx;
}
</style>
